<template>
  <el-dialog title="调整归属企业" :visible.sync="isVisible" @close="handleClose" width="500px">
    <el-form :model="form">
      <!-- 下拉列表选择新的归属企业 -->
      <el-form-item label="更换归属企业" :label-width="'120px'">
        <el-select v-model="form.newCompanyId" placeholder="请选择" clearable style="width: 100%">
          <el-option
            v-for="item in companyList"
            :key="item.id"
            :label="item.companyNickName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <!-- 批量/单条选择船舶 -->
      <!-- 单条选择 -->
      <div v-if="selectedShip !== null">
        <p>当前选中的船舶：{{ selectedShip.shipName }}</p>
      </div>
      <!-- 批量选择 -->
      <div v-else-if="selectedShips.length > 0">
        <p>当前选中的船舶数量：{{ selectedShips.length }} 条</p>
      </div>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleUpdateCompany">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateShipCompany } from '@/api/ship';
export default {
  props: {
    initialSelectedShip: Object, // 单条船舶数据（如果是单条修改时传入）
    initialSelectedShips: Array, // 多条船舶数据（如果是批量修改时传入）
    isVisible: Boolean,
    companyList: Array,
  },
  data() {
    return {
      form: {
        newCompanyId: '',
      },
      selectedShip: {},
      selectedShips: [],
    };
  },
  watch: {
    initialSelectedShip(ship) {
      this.selectedShip = ship;
      this.selectedShips = [];
    },
    initialSelectedShips(ships) {
      this.selectedShip = null;
      this.selectedShips = ships.slice();
    },
  },
  methods: {
    handleClose() {
      this.$emit('update:isVisible', false);
      this.$emit('close');
    },
    resetForm() {
      this.form.newCompanyId = '';
      this.selectedShip = null;
      this.selectedShips = [];
    },
    handleUpdateCompany() {
      if (this.selectedShip || this.selectedShips.length > 0) {
        const companyId = this.form.newCompanyId;

        if (!companyId) {
          this.$message.error('请选择要设置的归属企业');
          return;
        }

        // 更新逻辑 - 调用后端接口更新单条或多条船舶的归属企业
        if (this.selectedShip) {
          // 更新单条船舶
          this.updateSingleShip(companyId);
        } else {
          // 更新多条船舶
          this.updateBatchShips(companyId);
        }
      } else {
        this.$message.error('请先选择一条或多条船舶');
      }
    },
    updateSingleShip(companyId) {
      // 调用后端接口更新单条船舶的归属企业
      // 参数应包含船舶ID和新的归属企业ID
      updateShipCompany(this.selectedShip.id, companyId).then(() => {
        this.$message.success('更新成功');
        this.$emit('updateCompanyCallBack');
      });
    },
    updateBatchShips(companyId) {
      const shipIds = this.selectedShips.join(',');
      // 调用后端接口批量更新船舶的归属企业
      // 参数应包含一个包含多个船舶ID和新的归属企业ID的对象或数组
      updateShipCompany(shipIds, companyId).then(() => {
        this.$message.success('更新成功');
        this.$emit('updateCompanyCallBack');
      });
    },
  },
};
</script>
